<template>
  <div class="form-container">
    <el-form class="form-content">
      <el-row>
        <template v-for="item in formItems" :key="item.label">
          <el-col>
            <el-form-item v-bind="item">
              <!-- 输入框 -->
              <template v-if="item.type === 'input'">
                <el-input
                  :placeholder="item.placeholder"
                  clearable
                  :model-value="modelValue[`${item.field}`]"
                  @update:model-value="handleValueChange($event, item.field)"
                />
              </template>
              <!-- 下拉框 -->
              <template v-if="item.type === 'select'">
                <el-select
                  clearable
                  :placeholder="item.placeholder"
                  :model-value="modelValue[`${item.field}`]"
                  @update:model-value="handleValueChange($event, item.field)"
                  v-bind="item.otherOptions"
                >
                  <el-option
                    v-for="optionItem in item.options"
                    :label="optionItem.label"
                    :value="optionItem.value"
                    :key="optionItem.label"
                  />
                </el-select>
              </template>
              <!-- 切换 -->
              <template v-if="item.type === 'switch'">
                <el-switch
                  :model-value="modelValue[`${item.field}`]"
                  @update:model-value="handleValueChange($event, item.field)"
                />
              </template>
              <!-- 单选 -->
              <template v-if="item.type === 'radio'">
                <el-radio-group
                  :model-value="modelValue[`${item.field}`]"
                  @update:model-value="handleValueChange($event, item.field)"
                >
                  <el-radio
                    :label="optionItem.value"
                    v-for="optionItem in item.options"
                    :key="optionItem.label"
                  >
                    {{ optionItem.label }}
                  </el-radio>
                </el-radio-group>
              </template>
              <!-- 文本框 -->
              <template v-if="item.type === 'textarea'">
                <el-input
                  type="textarea"
                  :model-value="modelValue[`${item.field}`]"
                  @update:model-value="handleValueChange($event, item.field)"
                />
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const emits = defineEmits(['update:modelValue'])

const modelValue = ref({}) // 表单的绑定数据源
const handleValueChange = (value: any, field: string) => {
  emits('update:modelValue', { ...modelValue.value, [field]: value })
}
</script>
